<template>
  <div class="safe-bottom" h-60px bg-white flex flex-a-c flex-j-sb pa-12rpx>
    <div flex flex-a-c :style="{ flex: 6 }" gap-16rpx>
      <div flex-col flex-a-c flex flex-1 v-for="item in iconList" :key="item.value">
        <nut-badge :value="props.carts" v-if="item.value === 'cart' && props.carts">
          <div flex flex-col flex-a-c @click.native="navigate(item.value)">
            <nut-icon :name="item.icon" mb-4rpx></nut-icon>
            <span text-23rpx>{{ item.label }}</span>
          </div>
        </nut-badge>
        <div v-else>
          <div flex flex-col flex-a-c @click="navigate(item.value)">
            <nut-icon :name="item.icon" mb-4rpx></nut-icon>
            <span text-23rpx>{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <div pl-12rpx min-w-416rpx v-if="isShow" :style="{ flex: 8 }">
      <div v-if="goodsPromotionType === 'pintuan'" gap-12rpx flex w-full>
        <nut-button type="primary" flex-1 @click="handleClick('buy')">
          <div text-24rpx line-height-1>{{ unitPrice(props.info.data.price, '￥') }}</div>
          <div text-24rpx line-height-1 mt-20rpx>单独购买</div>
        </nut-button>
        <nut-button type="warning" flex-1 @click="handleClick('PINTUAN')">
          <div text-24rpx line-height-1>{{ unitPrice(props.info.data.promotionPrice, '￥') }}</div>
          <div text-24rpx line-height-1 mt-20rpx>拼团价格</div>
        </nut-button>
      </div>
      <div v-else gap-6rpx flex text-24rpx>
        <div flex-2 :style="{ minWidth: '140rpx' }">
          <nut-button
            :custom-style="{ minWidth: '140rpx', fontSize: '24rpx' }"
            text-22rpx
            v-if="isShowCartList"
            type="primary"
            @click="handleClick('cart')">
            加入购物车
          </nut-button>
        </div>
        <div flex-1 :style="{ minWidth: '180rpx' }">
          <nut-button
            :custom-style="{ width: '100%', fontSize: '24rpx' }"
            text-22rpx
            :block="!isShowCartList"
            type="warning"
            @click="handleClick('buy')">
            立即购买
          </nut-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { unitPrice } from '@/utils/filters'
const props = withDefaults(
  defineProps<{
    carts: number
    storeId: string
    info: any
  }>(),
  {
    carts: 0,
    storeId: '',
    info: {}
  }
)

let goodsPromotionType = ref<string>('')

const isGroupBuy = () => {
  if (props?.info.promotionMap) {
    Object.keys(props?.info.promotionMap).forEach((item) => {
      // 拼团商品
      if (item.indexOf('PINTUAN') === 0) {
        goodsPromotionType.value = 'pintuan'
      }

      // 秒杀
      if (item.indexOf('SECKILL') === 0) {
        goodsPromotionType.value = 'seckill'
      }
    })
  }
}
const isShow = ref(false)
const emit = defineEmits(['click'])

const isShowCartList = computed(() => {
  return props.info.data.goodsType !== 'VIRTUAL_GOODS'
})

const iconList = ref<any>([
  {
    label: '店铺',
    icon: 'shop',
    value: 'shop'
  },
  {
    label: '客服',
    icon: 'service',
    value: 'service'
  },
  {
    label: '购物车',
    icon: 'cart2',
    value: 'cart'
  }
])

watch(
  () => props.info,
  (val) => {
    if (val) {
      isShow.value = true
      isGroupBuy()
    }
  },
  {
    immediate: true
  }
)

function handleClick(type: string) {
  emit('click', type)
}

function navigate(val: string) {
  console.log(val)
  if (val === 'shop') {
    uni.navigateTo({
      url: '/pages/goods/store/detail?id=' + props.storeId
    })
  }
  if (val === 'cart') {
    uni.switchTab({
      url: '/pages/tabbar/cart'
    })
  }
  if (val === 'service') {
    uni.navigateTo({
      url: '/pages/im/index?userId=' + props.storeId
    })
  }
}
</script>

<style scoped lang="scss"></style>
